import '@css/adminPage.css'

import { sellersListApi } from '@utils/api/sellersManage'
import { searchSellersApi } from '@utils/api/sellersManage'
import { delSellerNameApi } from '@utils/api/sellersManage'
import { addsellersApi } from '@utils/api/sellersManage'
// 订单管理列表外部导入
import { userListApi, searListApi } from "@utils/api/orderList"




window.addEventListener("DOMContentLoaded", async () => {

  document.querySelector('#rightList').addEventListener('click', async e => {
    if (e.target.className == 'delSellersBtn') {
      const sid = e.target.getAttribute('dataSellerid')
      const result = await delSellerNameApi(sid)
      console.log(result);
      if (result) {
        alert('删除成功')
        const { code, rows } = await sellersListApi()
        renderSellersList(rows)
      }
    }
  })

  document.querySelector('#sellersList').addEventListener('click', () => {
    location = `sellersManage.html`
  })
  document.querySelector('#addSellers').addEventListener('click', () => {
    location = `addSellersManage.html`
  })
//用户信息管理
    document.querySelector('#userListBtn').addEventListener('click', () => {
    location = `userPage.html`
  })

  

  window.addEventListener("DOMContentLoaded", async () => {

    document.querySelectorAll(".api-box").forEach(item => {

      item.style.display = "none"

    })

    //a标签切换预留区，此区域的switch内置标签切换,只需要将你的列表div放入right-List中，并设置一个id,设置class为api-box，并给对应按钮一个id
    document.querySelectorAll("a").forEach(item => {
      item.addEventListener("click", (e) => {
        e.preventDefault()
        switch (e.target.getAttribute("data-id")) {
          //按钮的id
          // case "userListBtn":

            // document.querySelectorAll(".api-box").forEach(item => {
            //   item.style.display = "none"
            // })
            // 你的列表的id
            // document.getElementById("userListBtn").style.display = "block"
            // break;
        }
      })
    })


    document.querySelectorAll("h3").forEach(item => {
      item.addEventListener("click", async () => {
        if (item.style.backgroundColor != "gray") {
          item.style.backgroundColor = "gray"
          item.style.color = "white"
        } else {
          item.style.backgroundColor = "#485069"
          item.style.color = "rgb(175, 175, 175)"

        }
      })
    })
  })






  // 保险订单管理里面的保险订单列表
  document.querySelector('#ordersList').addEventListener('click', async () => {
    document.querySelector('#rightTop').innerHTML = '<h1>保险订单列表</h1><input type="text" placeholder="请输入内容 "id="inordersList" ><button id="searchOrders">搜索</button>'
    const { rows } = await userListApi()
    console.log(rows)
    renderOrdersList(rows)
    document.querySelector('#searchOrders').addEventListener('click', async () => {
      let ordersname = document.querySelector('#inordersList').value
      console.log(ordersname)
      const { rows } = await searListApi(ordersname)
      console.log(rows)
      renderOrdersList(rows)

    })


  })
  const renderOrdersList = (rows) => {
    document.querySelector('#rightList').innerHTML = '<table><thead><tr><td>订单编号</td><td>产品名称</td><td>客户名称</td><td>创建时间</td><td>支付手机</td><td>订单状态</td><td>理赔状态</td><td>操作</td></tr></thead><tbody></tbody></table>'
    document.querySelector('tbody').innerHTML = rows.map(item => `<tr>
  <td>${item._id}</td>
    <td>${item.insurancesId.insurancesName}</td>
    <td>${item.ordersName}</td>
    <td>${item.ordersTime}</td>
    <td>${item.payPhone}</td>
    <td>${item.ordersPayState == 0 ? '已支付' : '未支付'}</td>
    <td>${item.ordersState == 0 ? '已理赔' : '未理赔'}</td>
    <td>
    <button class="onceBuy">立即购买</button>
    <button class="delBtn">删除</button>
    </td>
  </tr>`).join('')
  }
  // 保险订单管理里面的退订订单列表
  document.querySelector('#unsubscribe').addEventListener('click', async () => {
    document.querySelector('#rightTop').innerHTML = '<h1>保险退订列表</h1><input type="text" placeholder="请输入内容"id="inordersList"><button id="searchOrders">搜索</button>'
    const { rows } = await userListApi()
    chargeOrdersList(rows)
    document.querySelector('#searchOrders').addEventListener('click', async () => {
      let ordersname = document.querySelector('#inordersList').value
      const { rows } = await searListApi(ordersname)
      chargeOrdersList(rows)

    })


  })
  const chargeOrdersList = (rows) => {
    document.querySelector('#rightList').innerHTML = '<table><thead><tr><td>订单编号</td><td>产品名称</td><td>客户名称</td><td>创建时间</td><td>支付手机</td><td>订单状态</td><td>理赔状态</td><td>操作</td></tr></thead><tbody></tbody></table>'
    document.querySelector('tbody').innerHTML = rows.map(item => `<tr>
  <td>${item._id}</td>
    <td>${item.insurancesId.insurancesName}</td>
    <td>${item.ordersName}</td>
    <td>${item.ordersTime}</td>
    <td>${item.payPhone}</td>
    <td>${item.ordersPayState == 0 ? '已支付' : '未支付'}</td>
    <td>${item.ordersState == 0 ? '已理赔' : '未理赔'}</td>
    <td>
    <button class="onceBuy">立即购买</button>
    <button class="delBtn">删除</button>
    </td>
  </tr>`).join('')
  }
})
